<template>
  <div>
    <van-nav-bar
      fixed
      title="调拨详情"
      left-arrow
      class="bg-primary color-white"
      @click-left="$utils.back($route.path)"
    />
		<div class="has-top">
			<div class="mg-20 pd-20 bg-white br-10">
				<div class="flex flex-s-c mb-10">
					<div>单号：{{ info.TransferNo }}</div>
					<div class="color-gray-light">{{ info.AddTime }}</div>
				</div>
				<div class="flex flex-s-c mb-10">
					<div>状态：{{ info.StateName }}</div>
					<div class="color-gray-light" v-if="info.State !== 4">{{ info.CheckTime }}</div>
				</div>
				
				<div class="flex mb-10" @click="showAvatar(info.ApplyImages)">凭证图片：<img-box class="classImg" :img-url="info.ApplyImages" /></div>
				<div class="mb-10">驳回理由：{{ info.CheckRemark }}</div>
				<div class="mb-10" style="color:#6290fc;" v-if="boundType === '0'">发货人： {{ info.OutStoreName }}( {{ info.OutUserCard }} )</div>
				<div class="mb-10" style="color:#6290fc;" v-if="boundType === '1'">申请人： {{ info.InStoreName }}( {{ info.InStoreName }} )</div>
				<div v-if="info.DetailList && info.DetailList.length > 0" class="product">
					<div style="color:#feb468;">调拨商品</div>
					<div v-for="(item,index) in info.DetailList" class="flex ptb-20">
						<div>
							<img-box class="is-140 br-10 mr-20" :img-url="item.ProductImage" />
						</div>
						<div class="productMsg">
							<div>{{ item.ProductName }}</div>
							<div class="">{{ item.Amount }}</div>
						</div>
					</div>
					<div class="flex-fe-c color-gray-light">共{{ getTotalNum() }}件</div>
				</div>
			</div>
			<div class="bg-white flex-fe-c pd-20" v-if="info.State === 0 ||(info.State === 3 && this.boundType === '0')">
				<div v-if="info.State === 0 && boundType === '0'" class="cancleBtn btn" @click.stop="handleAllocation(info,4)">取消调拨</div>
				<div v-if="info.State === 3 && boundType === '0'" class="sureBtn btn" @click.stop="handleAllocation(info,1)">确认收货</div>
				<div v-if="info.State === 0 && boundType === '1' && OffOutCheck==0" class="audit btn" @click.stop="showAudit">审核</div>
			</div>
			<van-dialog v-model="auditShow" title="审核" show-cancel-button closeable cancel-button-text="驳回" confirm-button-text="通过" close-on-click-overlay @confirm="handleAllocation(info,3)" @cancel="handleAllocation(info,2)">
				<van-field v-model="remark" type="textarea" class="fs-32 mt-15" placeholder="备注~" rows="7" maxlength="50" />
			</van-dialog>
			<van-popup v-model="showBigPicture" class="photos">
				<van-swipe class="my-swipe media-box" indicator-color="white" loop>
					<van-swipe-item>
						<van-icon name="cross popup-close" size="23" @click="showBigPicture = false" />
						<img-box class="shop-bg-box z-inner pos-r" :img-url="Avatar" />
					</van-swipe-item>
				</van-swipe>
			</van-popup>
		</div>
	</div>
</template>
<script>
import imgBox from 'components/imgBox'
import { CheckStockTransferApply, GetStockTransferApplyDetail,GetStockTransferSetting } from 'api/product'
export default {
	components: {
    imgBox
  },
	data() {
    return {
			info: {},
			boundType: 0,
			auditShow: false,
			remark: '',
			showBigPicture: false,
			Avatar: '',
			OffOutCheck:0
		}
	},
	created() {
		this.boundType = this.$route.query.boundType
		this.id = this.$route.params.id
		this.GetStockTransferApplyDetail(this.id)
		this.GetStockTransferSetting()
	},
	methods: {
		GetStockTransferApplyDetail(id){
			GetStockTransferApplyDetail({id: id}).then(res => {
				if(res.Data){
					this.info = res.Data
				}
			})
		},
		GetStockTransferSetting() {
			GetStockTransferSetting({noCheck:1}).then(res => {
				if (res.Data) {
					this.OffOutCheck = res.Data.OffOutCheck
				}
			})
		},
		getTotalNum(){
			let num = 0;
			this.info.DetailList.forEach(e=>{
				num +=e.Amount
			})
			return num;
		},
		handleAllocation(item,state){
			const obj = {}
			obj.id = item.ID
			obj.state = state
			if(state === 3 && item.StockMode === 1){
				obj.state = 1
			}
			obj.checkRemark = this.remark
			CheckStockTransferApply(obj).then(res => {
				if(res.Data){
					setTimeout(() => {
						this.GetStockTransferApplyDetail(this.id)
					}, 1000)
					if(state === 1){
						this.$toast('确认成功')
					}
					if(state === 2){
						this.$toast('驳回成功')
					}
					if(state === 3){
						this.$toast('审核成功')
					}
					if(state === 4){
						this.$toast('取消成功')
					}
				} else {
					this.$toast.fail(res.Msg)
				}
			})
		},
		showAudit(){
			this.auditShow = true
		},
		showAvatar(item){
			this.Avatar = item
			this.showBigPicture = true
		}
	}
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-icon{
    color:#fff;
  }
  /deep/.van-nav-bar__title{
    color:#fff;
  }
}
.classImg{
	width: 120px;
}
.product{
	border-top: 1px solid #ebebeb;
	padding: 20px 0;
}
.productMsg{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.btn {
		width: 170px;
		height: 64px;
		line-height: 64px;
		border-radius: 32px;
		text-align: center;
		margin-right: 24px;
		margin-top: 12px;
	}
	.cancleBtn{
		border: 1px solid #666;
		color: #666;
	}
	.sureBtn{
		border: 1px solid #333;
		color: #333;
	}
	.audit{
		border: 1px solid red;
		color: red;
	}
	.photos{
		width: 100%;
	}
</style>
